@charset "UTF-8";
.banner-warp {
    position:relative;
    font-family:"Hiragino Sans GB",
    "Microsoft Yahei",
    arial,
    宋体,
    "Helvetica Neue",
    Helvetica,
    STHeiTi,
    sans-serif
}
.banner-swiper {
    position:relative;
    height:344px
}
.banner-swiper>li>div {
    width:100%;
    position:absolute;
    height:344px;
    background-color:#030404
}
.baner-swiper-btns {
    position:absolute;
    width:1180px;
    height:8px;
    line-height:0;
    left:calc((100% - 1180px)/ 2);
    bottom:10px;
    text-align:center
}
.baner-swiper-btns li {
    cursor:pointer;
    display:inline-block;
    margin:2px 4px;
    width:24px;
    height:4px;
    background:rgba(255,255,255,.3);
    -webkit-border-radius:2px;
    border-radius:2px
}
.baner-swiper-btns li:hover {
    background:rgba(255,255,255,.6)
}
.baner-swiper-btns li.active,
.baner-swiper-btns li.active:hover {
    background:#20d674
}
.banner-item {
    width:868px;
    height:344px;
    position:absolute;
    overflow:hidden;
    left:calc((100% - 1180px)/ 2 + 28px)
}
.banner-item img {
    object-fit:cover
}
.banner-item-flag {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:24px;
    -webkit-border-radius:2px;
    border-radius:2px;
    padding:0 8px;
    border:1px solid rgba(235,235,245,.6);
    color:rgba(235,235,245,.6);
    line-height:22px;
    position:absolute;
    top:116px;
    left:0
}
.banner-item-title {
    position:absolute;
    left:0;
    top:148px;
    max-width:336px;
    font-size:28px;
    font-weight:700;
    font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
    color:#fff;
    line-height:40px;
    text-shadow:0 2px 2px rgba(0,0,0,.4)
}
.banner-login-btn,
.banner-login-desc,
.banner-login-out {
    font-size:14px;
    position:absolute
}
.banner-login-card {
    width:256px;
    height:312px;
    position:absolute;
    top:16px;
    right:calc((100% - 1180px)/ 2 + 28px);
    background:#fff;
    -webkit-border-radius:8px;
    border-radius:8px;
    -webkit-user-select:none;
    user-select:none
}
.banner-login-title-img {
    left:15px;
    top:28px;
    position:absolute;
    width:227px;
    height:152px;
    background:url(https://open-image.ws.126.net/a9c4de22b25349c39eb82bdf163d96d6.png) center center/contain no-repeat
}
.banner-login-desc {
    width:100%;
    top:184px;
    height:16px;
    text-align:center;
    color:rgba(60,60,67,.6)
}
.banner-login-btn {
    bottom:41px;
    left:68px;
    width:120px;
    background:#20d674;
    -webkit-border-radius:4px;
    border-radius:4px;
    color:#fff;
    line-height:38px;
    text-align:center;
    font-weight:600;
    cursor:pointer
}
.banner-login-out {
    cursor:pointer;
    width:72px;
    font-weight:400;
    color:rgba(60,60,67,.3);
    line-height:16px;
    right:16px;
    top:16px;
    text-align:right
}
.banner-login-avatar {
    width:88px;
    height:88px;
    position:absolute;
    top:52px;
    left:84px;
    -webkit-border-radius:44px;
    border-radius:44px;
    background:url(//open-image.ws.126.net/26a9a1a0e60e4cc49d3f6683b0b3154e.jpg) center center/cover no-repeat
}
.banner-login-name,
.banner-login-subtitle {
    width:100%;
    line-height:16px;
    position:absolute;
    text-align:center
}
.banner-login-name {
    font-size:16px;
    font-weight:600;
    color:rgba(0,0,0,.86);
    top:152px
}
.banner-login-subtitle {
    font-size:14px;
    color:rgba(60,60,67,.3);
    top:176px
}
.banner-login-usercenter {
    width:112px;
    height:40px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #20d674;
    position:absolute;
    bottom:40px;
    left:72px;
    text-align:center;
    line-height:40px;
    font-size:16px;
    color:#20d674;
    cursor:pointer
}
.fade-enter-active,
.fade-leave-active {
    -webkit-transition:opacity .6s;
    transition:opacity .6s
}
.fade-enter,
.fade-leave-to {
    opacity:0
}
